* {
    margin: 0;
    padding: 0;
}

.ProgressBar {
    background: #f0f0f0;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    /* box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1) inset; */
}


/* .ProgressBar_v {
  width: 30px;
  height: 100%;
  border-radius: 15px;
  background: #f0f0f0;
  margin: 0 auto;
  box-sizing: border-box;
} */

.ProgressLine {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 15px;
    background: #eb3e3e;
}

.ProgressLine .btn {
    position: absolute;
    height: 100%;
    right: 0;
    border-radius: 50%;
    font-size: 8px;
    background: #eb3e3e;
    border: 6px solid #fff;
    top: 50%;
    transform: translate(6px, -50%);
    box-sizing: content-box !important;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ProgressLine .btn.disable {
    background: #ddd;
    border-color: #fafafa;
}

.ProgressLine .btn .loading {
    display: none;
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    border-radius: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    background: url('../images/loading1.gif');
    background-position: center center;
    background-size: 130%;
    opacity: 0.5;
    /* animation: rate 2s linear infinite; */
}

.progress {
    margin: 0 .13rem;
    padding: 0 0.5rem;
}

@keyframes rate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.vertical {
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -6px) !important;
}

.ProgressBar .progressVal {
    position: absolute;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    width: 45px;
    box-sizing: border-box;
    padding: 0 4px;
    font-size: 10px;
    color: #fff;
    height: 20px;
    line-height: 20px;
    border-radius: 4px;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.5s linear;
}

.ProgressBar .progressVal.bottom {
    top: auto;
    bottom: -35px;
}

.ProgressBar .progressVal::after {
    position: absolute;
    content: '';
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.4) transparent transparent;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.ProgressBar .progressVal.bottom::after {
    bottom: auto;
    top: -5px;
    border-width: 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.4);
}

.ProgressBar .progressVal.left {
    top: auto;
    left: -40px;
}

.ProgressBar .progressVal.left::after {
    top: 50%;
    transform: translateY(-50%);
    left: auto;
    right: -5px;
    bottom: auto;
    border-width: 5px 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.4);
}

.ProgressBar .progressVal.right {
    top: auto;
    right: -85px;
    left: auto;
}

.ProgressBar .progressVal.right::after {
    top: 50%;
    transform: translateY(-50%);
    right: auto;
    left: -5px;
    bottom: auto;
    border-width: 5px 5px 5px 0;
    border-style: solid;
    border-color: transparent rgba(0, 0, 0, 0.4) transparent transparent;
}